import React from 'react';
import Grid from '@mui/material/Grid2';
import { useSelector } from 'react-redux';
import Filter from '../components/Filter.js'
import Toolbar from '../components/Toolbar.js'
import JobTable from '../components/SmartTable/SmartTable.js'

function NewJobPage(props) {
  const jobDetail = useSelector(state => state.job.jobDetail)

  return (
    <Grid container spacing={2}>
      <Grid size={6}>
        <Filter/>
        <Toolbar deleteBtn={true} gotoFirstBtn={true} />
        <JobTable/>
      </Grid>
      <Grid size={6} style={{ background: 'white' }}>
        {jobDetail.split('\n').map((text) => <div>{text}</div>)}
      </Grid>
    </Grid>)

}

export default NewJobPage